<template>
  <left-wrap class="left-wrap">
    <div class="continer">
      <CardBox class="card-box-1" title="基本概况">
        <div class="area-1">
          <img src="@/assets/images/index/编组 3@2x.webp" alt="" />
          <div class="text">
            <div class="title">公司介绍</div>
            <div class="text-title">中国YD泰州分公司</div>
            <div class="text-content">
              <NoteScroll width="100%" height="1.2rem">
                {{ info.companyIntro }}
              </NoteScroll>
            </div>
          </div>
        </div>
        <div class="area-2">
          <div class="area-top">
            <div class="item">
              <div class="title">总面积(m2)</div>
              <div class="msg">
                <img src="@/assets/images/index/组一@2x.webp" alt="" />
                <div class="num">
                  <count-to
                    :startVal="0"
                    :endVal="info.totalArea || 0"
                    :duration="3000"
                  ></count-to>
                  <!-- {{ formatNumber(info.totalArea) }} -->
                </div>
              </div>
            </div>

            <div class="item">
              <div class="title">楼栋数量</div>
              <div class="msg">
                <img src="@/assets/images/index/组一@2x.webp" alt="" />
                <div class="num">
                  <count-to
                    :startVal="0"
                    :endVal="info.buildingCount || 0"
                    :duration="3000"
                  ></count-to>
                </div>
              </div>
            </div>

            <div class="item">
              <div class="title">办公人数</div>
              <div class="msg">
                <img src="@/assets/images/index/组一@2x.webp" alt="" />
                <div class="num">
                  <count-to
                    :startVal="0"
                    :endVal="info.peopleCount || 0"
                    :duration="3000"
                  ></count-to>
                </div>
              </div>
            </div>
          </div>
          <div class="area-bottom"></div>
        </div>
        <div class="area-3">
          <img src="@/assets/images/index/border_1.webp" alt="" />
          <div class="area-content-list">
            <div class="row top">
              <div class="item">
                <div class="item-title">餐厅</div>
                <img src="@/assets/images/index/2@2x.webp" alt="" />
                <div class="msg">
                  <div class="num">{{ info.canteen }}</div>
                  <div class="text">家</div>
                </div>
              </div>

              <div class="item">
                <div class="item-title">停车场</div>
                <img src="@/assets/images/index/4@2x.webp" alt="" />
                <div class="msg">
                  <div class="num">{{ 4 }}</div>
                  <div class="text">个</div>
                </div>
              </div>
            </div>

            <div class="row bottom">
              <div class="item">
                <div class="item-title">休闲区</div>
                <img src="@/assets/images/index/3@2x.webp" alt="" />
                <div class="msg">
                  <div class="num">{{ info.leisureArea }}</div>
                  <div class="text">处</div>
                </div>
              </div>

              <div class="item">
                <div class="item-title">超市</div>
                <img src="@/assets/images/index/5@2x.webp" alt="" />
                <div class="msg">
                  <div class="num">{{ info.supermarket }}</div>
                  <div class="text">个</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </CardBox>
      <CardBox class="card-box-2" title="访客数据">
        <div class="area-1">
          <div class="vistor-item">
            <div class="item-top">
              <div class="item-icon">
                <img
                  class="image"
                  src="@/assets/images/index/today_vistor.webp"
                  alt=""
                />
              </div>
              <div class="item-msg">
                <div class="num">
                  <count-to
                    :startVal="0"
                    :endVal="vistorData.todayVisitorTotal || 0"
                    :duration="3000"
                  ></count-to>
                </div>
                <div class="text">今日到访人数</div>
              </div>
            </div>
            <div class="item-bottom">
              <img
                src="@/assets/images/index/today_vistor_bottom.webp"
                alt=""
              />
            </div>
          </div>
          <div class="vistor-item">
            <div class="item-top">
              <div class="item-icon">
                <img
                  class="image"
                  src="@/assets/images/index/all_vistor.webp"
                  alt=""
                />
              </div>
              <div class="item-msg">
                <div class="num">
                  <count-to
                    :startVal="0"
                    :endVal="vistorData.visitorTotal || 0"
                    :duration="3000"
                  ></count-to>
                </div>
                <div class="text">总访客人数</div>
              </div>
            </div>
            <div class="item-bottom">
              <img
                src="@/assets/images/index/today_vistor_bottom.webp"
                alt=""
              />
            </div>
          </div>
        </div>
        <div class="area-2">
          <EchartsTpl
            width="100%"
            :height="setFontSize(200) + 'px'"
            :option="fetchData"
          ></EchartsTpl>
        </div>
      </CardBox>
    </div>
  </left-wrap>
</template>

<script lang="ts" setup>
import useLeftBar from "../../echarts_datas/left_bar";

import { setFontSize } from "@/utils/px_rem";
// import { formatNumber } from "@/utils/tools";

import { watch } from "vue";

const props = defineProps({
  info: { type: Object, default: () => ({}) },
  vistorData: { type: Object, default: () => ({}) },
});

const [fetchData, setFetchData] = useLeftBar();

//  数据加工
watch(
  () => props.vistorData,
  (val) => {
    setFetchData(val.weekVisitorLine);
  }
);
</script>


<style lang="scss" scoped>
.left-wrap {
  width: 5rem;
}

.continer {
  margin-top: 0.95rem;

  // 基本概况
  .card-box-1 {
    .area-1 {
      position: relative;
      top: -0.2rem;
      width: 4.79rem;
      height: 2.42rem;

      .text {
        position: absolute;
        top: 0.18rem;
        right: 0.45rem;
        width: 2.15rem;
        height: 2.23rem;
        padding-left: 0.11rem;
        padding-right: 0.09rem;
        box-sizing: border-box;

        .title {
          position: absolute;
          top: 0.06rem;
          left: 0.66rem;
          font-size: 0.16rem;
          color: #dee7f7;
          letter-spacing: 0.02rem;
        }

        .text-title {
          margin-top: 0.5rem;
          margin-left: 0.28rem;
          font-size: 0.18rem;
          text-shadow: 0px 0px 0.11rem #0091ff;
        }

        .text-content {
          margin-top: 0.07rem;
          color: #dee7f7;
          font-size: 0.12rem;
          line-height: 0.18rem;
          letter-spacing: 0.0001rem;
        }
      }
    }

    .area-2 {
      margin-top: -0.1rem;

      .area-top {
        display: flex;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 0.15rem;

          .title {
            font-size: 0.14rem;
            color: #e7f0ff;
          }

          .msg {
            position: relative;
            left: 0;
            top: 0;
            margin-top: 0.06rem;
            width: 1.4rem;
            height: 0.51rem;

            .num {
              position: absolute;
              left: 0;
              top: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 100%;
              height: 100%;
              color: #43deff;
              font-size: 0.24rem;
              font-family: "SJyunhei";
            }
          }
        }
      }
    }

    .area-3 {
      position: relative;
      margin-top: 0.22rem;
      width: 4.34rem;
      height: 1.84rem;

      .area-content-list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;

        .row {
          display: flex;

          &.top {
            margin-top: 0.15rem;
          }

          &.bottom {
            margin-top: -0.08rem;
          }

          .item {
            position: relative;
            width: 2.12rem;
            height: 0.95rem;

            .item-title {
              position: absolute;
              left: 1.1rem;
              font-size: 0.14rem;
              color: #ccc;
            }

            .msg {
              position: absolute;
              top: 0.22rem;
              left: 1rem;
              display: flex;
              align-items: end;
              z-index: 1;

              .num {
                min-width: 0.5rem;
                font-size: 0.24rem;
                font-family: "SJyunhei";
              }

              .text {
                margin-bottom: 0.02rem;
                font-size: 0.14rem;
                color: #ccc;
              }
            }
          }
        }
      }
    }
  }

  .card-box-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

    .area-1 {
      position: relative;
      display: flex;
      // wid
      justify-content: center;

      .vistor-item {
        .item-top {
          display: flex;
          align-items: center;

          .item-icon {
            position: relative;
            width: 0.58rem;
            height: 0.55rem;
          }

          .item-msg {
            margin-left: 0.28rem;
            .num {
              font-size: 0.32rem;
              color: #eaf5ff;
              text-shadow: 0px 0.01rem 0.07rem #18a9ff;
            }

            .text {
              font-size: 0.16rem;
            }
          }
        }

        .item-bottom {
          position: relative;
          width: 1.98rem;
          height: 0.27rem;
        }

        &:nth-child(2) {
          margin-left: 0.39rem;
        }
      }
    }

    .area-2 {
      margin-top: 0.1rem;
      width: 100%;
    }
  }
}
</style>